<template>
	<view class="detail-page">
		<view class="input-box">
			<u-textarea :showConfirmBar="false" v-model="inputVal" placeholder="请输入需要配音的文字..." count maxlength="300"
				height="140" border="none"></u-textarea>
		</view>
		<view class="anchor-box">
			<view class="user-box">
				<view class="head-img">
					<image :src="detailInfo.profile" v-if="detailInfo.profile"></image>
					<image :src="localIconSrc('17.png')"  v-else></image>
					<view class="vip">
						{{detailInfo.cost_type?detailInfo.cost_type.val==0?'免费':detailInfo.cost_type.val:''}}
					</view>
				</view>
				<view class="name-box">
					<view class="name">
						<text>{{detailInfo.name}}</text>
						<view class="language">{{detailInfo.language.text }}</view>
						<view style="margin-left: 20rpx;">
							<u-icon v-if="detailInfo.is_collect==1" @click="collectFun" name="star-fill" color="#FF6005"
								size="20"></u-icon>
							<u-icon v-else @click="collectFun" name="star" color="#878787" size="20"></u-icon>
						</view>
					</view>
					<view class="user-remark">{{detailInfo.describe || ""}}</view>
					<!-- <view class="user-remark">
						<view class="item" v-for="eve in detailInfo.label">{{eve}}</view>
					</view> -->
				</view>
				<view class="btn" @click="changePub">更换主播</view>
			</view>
			<view class="user-remark">
				<view class="item" v-for="eve in detailInfo.label">{{eve}}</view>
			</view>
		</view>

		<view class="anchor-box">
			<view class="user-status">
				<view class="item" :style="index==playIndex?'background-color:#f4f4f4;':''" v-for="(item,index) in emotionList"
					@click="changeStatus(item, index)" :key="index">
					<view class="icon">
						<view class="gg">
							<text v-if="item.status==0">{{item.text.substring(0,1)}}</text>
							<u-loading-icon color="#ffffff" size="20" mode="semicircle" v-if="item.status==1"></u-loading-icon>
							<u-icon name="pause" color="#ffffff" size="16" v-if="item.status==2"></u-icon>
							<!-- <u-icon name="play-right-fill" color="#ffffff" size="28"></u-icon> -->
						</view>
					</view>
					<!-- 		<view class="icon">
						{{item.text.substring(0,1)}}
					</view> -->
					<view class="remark">{{item.text}}</view>
				</view>
			</view>
			
			<!-- <view style="display: flex;"> -->
				<view
					class="remark-text"
					:class="collapse ? 'open' : ''"
					v-if="emotionList.length>0"
				>
					{{emotionList[playIndex].remark}}
				</view>
			<!-- </view> -->
			<view class="remark-btn" @click="collapseText" v-if="emotionList.length>0">
				{{ collapse ? '收起' : '展开'}}
			</view>
			
			
			
			
		</view>
		<view class="other-box">
			<block v-for="(value,key,index) in detailInfo.default_para" v-if="value.max_val">
				<view class="title">{{value.text}}</view>
				<view class="speed">
					<movable-area class="speed-box">
						<view class="item" @click="speedFun(0,key)" style="padding-left: 20rpx;box-sizing: border-box;">
							{{value.min_val}}
						</view>
						<view class="item" @click="speedFun(1,key)">{{(Number(value.max_val)/4).toFixed(1)}}</view>
						<view class="item" @click="speedFun(2,key)">{{((Number(value.max_val)/4)*2).toFixed(1)}}</view>
						<view class="item" @click="speedFun(3,key)">{{((Number(value.max_val)/4)*3).toFixed(1)}}</view>
						<view class="item" @click="speedFun(4,key)" style="padding-right: 20rpx;box-sizing: border-box;">
							{{value.max_val}}
						</view>
						<movable-view class="speed-icon" direction="horizontal" damping="30" scale="true" y="-3" :x="value.distance"
							@change="(e)=>handleMove1(e,key)">
							<text style="font-size: 32rpx;">{{value.default_val}}</text>
						</movable-view>
					</movable-area>
				</view>
			</block>
		
		
		
		
			<!-- 			<picker :range="list0" @change="modelChange0" range-key="name">
				<view class="model-box" v-if="list0.length>0">
					<view class="name">切割方式</view>
					<view class="nn">
						<text>{{list0[qgIndex].name}}</text><u-icon name="arrow-right" color="#999" size="18"></u-icon>
					</view>
				</view>
			</picker>
			<picker :range="list1" @change="modelChange">
				<view class="model-box">
					<view class="name">文本模型</view>
					<view class="nn">
						<text>{{list1[modelIndex]}}</text><u-icon name="arrow-right" color="#999" size="18"></u-icon>
					</view>
				</view>
			</picker>
			<picker :range="list2" @change="modelChange2">
				<view class="model-box ">
					<view class="name">语言模型</view>
					<view class="nn">
						<text>{{list2[toneIndex]}}</text><u-icon name="arrow-right" color="#999" size="18"></u-icon>
					</view>
				</view>
			</picker> -->
		
		</view>
		
		<view class="subbtn-box">
			<view class="subbtn" @click="submitFun">
				合成配音
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pubDetail,
		pubFit,
		fileLinkUrl,
		addCollect,
		cancelCollect,
		aiModel
	} from "@/api/index.js"
	export default {
		data() {
			return {
				list: ['4545', '4564'],
				isload: true,
				screenWidth: '',
				speedWidth: '',
				inputVal: '',
				code: '',
				detailInfo: {
					name: '',
					default_para: {
						fragment_interval: [],
						speech_speed: {
							text: "语速",
							distance: 100,
							default_val: "0",
							min_val: "0",
							max_val: "500"
						},
						pitch_rate: {
							text: "语调",
							distance: 0,
							default_val: "0",
							min_val: "0",
							max_val: "500"
						},
						volume: {
							text: "音量",
							distance: 0,
							default_val: "80",
							min_val: "0",
							max_val: "100"
						},
					}
				},
				playIndex: 0,
				playStatus: false,
				playAudio: uni.createInnerAudioContext(),
				modelIndex: 0,
				toneIndex: 0,
				qgIndex: 0,
				audioUrl: '',
				audioUrls: '',
				emotionList: [],
				list0: [],
				list1: [],
				list2: [],
				modelShow: false,
				toneShow: false,
				changeGG: null,
				collapse: false,
				flag: false,
			}
		},
		onLoad(option) {
			this.code = option.code
			uni.showLoading({
				title: '请稍后...'
			})
			this.$nextTick(() => {
				this.getPubDetail(option.code)
			})
		},
		onShow() {
			this.getPubDetail(this.code)
		},
		onHide() {
			this.emotionList.forEach(item => {
				item.audio.stop()
			})
		},
		onUnload() {
			this.emotionList.forEach(item => {
				item.audio.stop()
				item.audio.destroy()
			})
		},
		onShareTimeline() {
			return {
				title: this.detailInfo.name,
				query: 'code=' + this.code
			}
		},
		onShareAppMessage() {
			return {
				title: this.detailInfo.name,
				path: '/pages/ai-dub/detail/detail?code=' + this.code
			}
		},
		methods: {
			collapseText() {
				this.collapse = !this.collapse
			},
			collectFun(item, index) {
				if (this.detailInfo.is_collect == 1) {
					let param = {
						productid: this.detailInfo.product_code //	String	是	32	产品ID或者产品代码
					}
					cancelCollect(param).then(res => {
						this.detailInfo.is_collect = 0
					})
				} else {
					let param = {
						type: 1, //	Int	是	3	产品类型:1 配音	
						productid: this.detailInfo.product_code //	String	是	32	产品ID或者产品代码
					}
					addCollect(param).then(res => {
						this.detailInfo.is_collect = 1
					})
				}

			},
			//模型改变
			modelChange0(e) {
				this.qgIndex = e.detail.value
			},
			modelChange(e) {
				this.modelIndex = e.detail.value
			},
			//模型改变
			modelChange2(e) {
				this.toneIndex = e.detail.value
			},
			//合成
			submitFun() {
				uni.showLoading({
					title: '请稍后...'
				})
				if (this.playAudio) {
					this.playAudio.stop()
				}
				const param = {
					product_code: this.code, //	String	是	32	产品代码	
					input: this.inputVal, //	String	是	1000	需要合成的文本
					speech_speed: this.detailInfo.default_para["speech_speed"].max_val ? this.detailInfo.default_para[
						"speech_speed"].default_val : '', //	Int	否	3	语速，取值范围：0~500，默认值：0。	
					fragment_interval: this.detailInfo.default_para["fragment_interval"].max_val ? this.detailInfo
						.default_para["fragment_interval"].default_val : '', //	Int	否	3	段之间的间隔，取值范围：0.1 - 1，默认0.3	
					volume: this.detailInfo.default_para["volume"].max_val ? this.detailInfo.default_para["volume"]
						.default_val : '', //	Int	否	3	音量，取值范围：0~100，默认值：50。	
					pitch_rate: this.detailInfo.default_para["pitch_rate"].max_val ? this.detailInfo.default_para[
						"pitch_rate"].default_val : '', //	Int	否	3	语调，取值范围：0~500，默认值：0。
					// speech_speed: this.speedNum, //	Int	否	3	控制合成音频的速度，取值范围：0.25 - 4，默认1	
					// fragment_interval: this.fragmentNum, //	Int	否	3	控制音频片段之间的间隔，取值范围：0.1 - 1，默认0.3	
					// ckpt_mode_id: this.list1.length > 0 ? this.list1[this.modelIndex] :
					// "", //	String	否	8	指定模型，默认e15，通过《取主播配置》获得	
					// pth_mode_id: this.list2.length > 0 ? this.list2[this.toneIndex] :
					// "", //	String	否	6	指定语气，默认e8，通过《取主播配置》获得
					// cut_punc: this.list0.length > 0 ? this.list0[this.qgIndex].val : "",
					// tone: this.playIndex == 0 ? '' : this.emotionList[this.playIndex].name
				}
				pubFit(param).then(res => {
					uni.hideLoading()
					if (res.taskid) {
						getApp().globalData.pubData = {
							inputVal: this.inputVal,
							taskid: res.taskid,
							image: this.detailInfo.profile
						}
						uni.navigateTo({
							url: '/pages/ai-dub/detail-info/detail-info'
						})

					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				})
			},
			//点击主播情绪
			changeStatus(item, index) {
				console.log('index', index, item)
				let arr = this.emotionList
				if (this.playIndex == index && arr[index].status != 0) {
					arr[index].audio.stop()
					return
				}
				arr[this.playIndex].audio.stop()
				arr[this.playIndex].status = 0
				
				
				arr[index].status = 1
				
				arr[index].audio.play()


				arr[index].audio.onCanplay(() => {
					console.log('可以播放1')
					arr[index].status = 2
				})
				arr[index].audio.onPlay(() => {
					console.log('可以播放2')
					arr[index].status = 2
				})
				arr[index].audio.onStop(() => {
					console.log('播放暂停')

					arr[index].status = 0
				})
				arr[index].audio.onEnded(() => {
					console.log('播放结束')
					arr[index].status = 0
				})
				
				this.playIndex = index
			},
			changePub() {
				uni.navigateBack()
			},
			//配音详情
			getPubDetail(code) {
				pubDetail({
					product_code: code
				}).then(res => {
					res.data.label = res.data.label.split(',')
					this.detailInfo = res.data
					let xjj = res.data
					setTimeout(() => {
						let w1 = 0;
						let w2 = 0;
						uni.createSelectorQuery().in(this).select('.speed').boundingClientRect((rect) => {
							this.screenWidth = Math.round(rect.width)
							w1 = Math.round(rect.width)
							uni.createSelectorQuery().in(this).select('.speed-icon')
								.boundingClientRect((rects) => {
									this.speedWidth = Math.round(rects.width)
									w2 = Math.round(rects.width)
									setTimeout(() => {
										this.isload = false
									}, 1000);

									for (let key in xjj.default_para) {
										let max = (Number(xjj.default_para[key].max_val) / w1).toFixed(
											1);
										xjj.default_para[key].distance = Math.floor((Number(xjj
												.default_para[key]
												.default_val) /
											max) - w2)
									}
									console.log(xjj)

									this.detailInfo = xjj
									let arr = []
									if (res.data.sub_tone_list && res.data.sub_tone_list
										.length > 0) {
										arr = res.data.sub_tone_list.map(item => {
											return {
												"url": item.audio_url,
												"status": 0,
												"remark": item.audio_prompt_text,
												"text": item.audio_text,
												"audio": uni.createInnerAudioContext(),
												"name": item.name
											}
										})
									}
									arr.unshift({
										"url": res.data.default_audio_url,
										"status": 0,
										"remark": res.data.default_audio_text,
										"text": '默认',
										"audio": uni.createInnerAudioContext()
									})
									arr.forEach(item => {
										item.audio.src = item.url
									})
									this.emotionList = arr
									uni.hideLoading()

								}).exec();
						}).exec();

					}, 1000)

					// let arr = []
					// if (res.data.sub_tone_list && res.data.sub_tone_list.length > 0) {
					// 	arr = res.data.sub_tone_list.map(item => {
					// 		return {
					// 			"url": item.audio_url,
					// 			"status": 0,
					// 			"text": item.audio_text,
					// 			"audio": uni.createInnerAudioContext(),
					// 			"name":item.name
					// 		}
					// 	})
					// }
					// arr.unshift({
					// 	"url": res.data.default_audio_url,
					// 	"status": 0,
					// 	"text": '默认',
					// 	"audio": uni.createInnerAudioContext()
					// })
					// arr.forEach(item => {
					// 	item.audio.src = item.url
					// })
					// this.emotionList = arr
					// this.getAiModel()
				})
			},
			getAiModel() {
				aiModel({
					product_code: this.code
				}).then(res => {
					if (res && res.data) {
						this.list1 = res.data.ckpt
						this.list2 = res.data.pth
						this.list0 = res.data.cut_punc
					}
				})
			},
			speedFun(number, key) {
				this.isload = true
				clearTimeout(this.changeGG)
				let xjj = this.detailInfo
				switch (number) {
					case 0:
						xjj.default_para[key].distance = 0
						xjj.default_para[key].default_val = xjj.default_para[key].min_val
						break;
					case 1:
						xjj.default_para[key].distance = Math.floor((this.screenWidth / 4) - 20)
						xjj.default_para[key].default_val = Math.floor(xjj.default_para[key].max_val / 4)
						break;
					case 2:
						xjj.default_para[key].distance = Math.floor((this.screenWidth / 2) - 20)
						xjj.default_para[key].default_val = Math.floor(xjj.default_para[key].max_val / 2)
						break;
					case 3:
						xjj.default_para[key].distance = Math.floor(((this.screenWidth / 4) * 3) - 20)
						xjj.default_para[key].default_val = Math.floor((xjj.default_para[key].max_val / 4) * 3)
						break;
					case 4:
						xjj.default_para[key].distance = this.screenWidth
						xjj.default_para[key].default_val = xjj.default_para[key].max_val
						break;
				}
				this.changeGG = setTimeout(() => {
					this.isload = false
				}, 2000)
			},


			handleMove1(e, key) {
				let xjj = this.detailInfo
				if (!this.isload) {
					if (e.detail.x >= (this.screenWidth - ((this.speedWidth) + 20))) {
						xjj.default_para[key].default_val = xjj.default_para[key].max_val
					} else if (e.detail.x == 0) {
						xjj.default_para[key].default_val = xjj.default_para[key].min_val
					} else {
						xjj.default_para[key].default_val = ((Number(xjj.default_para[key].max_val) / (this.screenWidth - (
							20 + this.speedWidth))) * e.detail.x).toFixed(1);
					}
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.detail-page {
		padding-bottom: 200rpx;
	}

	.input-box {
		width: 92%;
		margin: auto;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.anchor-box {
		width: 92%;
		background-color: #fff;
		margin: auto;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		
		.remark-text {
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #666;
			// max-height: 120rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// transition: max-height 0.5s ease;
			overflow: hidden; 
		  word-break: break-all;
		  text-overflow: ellipsis;
		  display:-webkit-box; 
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 3;
		}
		.remark-text::before{
			content: '';
			float: right;
			width: 0px;
			height: calc(100% - 40rpx);
		}
		.remark-btn {
			color: #47ACF5;
			margin-top: 10rpx;
			font-size: 24rpx;
			// float: right;
			// clear: both;
		}
		.open {
		  // max-height: none;
			display:block;
			text-overflow:initial;
		}

		.user-box {
			display: flex;
			position: relative;
			padding-bottom: 36rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #f4f4f4;

			.head-img {
				width: 100rpx;
				height: 100rpx;
				position: relative;

				.vip {
					position: absolute;
					bottom: -14rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 20rpx;
					background-color: rgba(0, 0, 0, 0.6);
					color: #fff;
					height: 40rpx;
					width: 70rpx;
					border-radius: 30rpx;
					line-height: 40rpx;
					text-align: center;
				}

				image {
					height: 100%;
					width: 100%;
					border-radius: 50%;
				}

			}

			.name-box {
				margin-left: 20rpx;
				position: relative;

				.name {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 600;
				}

				.language {
					border: 1px solid #999;
					padding: 1px 4px;
					box-sizing: border-box;
					font-size: 20rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					color: #999;
				}

				.user-remark {
					font-size: 24rpx;
					color: #a6a6a6;
					margin-top: 10rpx;
					display: flex;

					.item {
						border: 1px solid #a6a6a6;
						padding: 2px 4px;
						box-sizing: border-box;
						font-size: 24rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}
			}

			.btn {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				border: 1px solid #{$main-color};
				color: #{$main-color};
				font-size: 24rpx;
				padding: 6rpx 20rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
			}
		}

		.user-status {
			display: flex;
			overflow-x: scroll;
			margin-top: 20rpx;

			.item {
				width: 100rpx;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10rpx 0;
				box-sizing: border-box;
				border-radius: 10rpx;

				.icon {
					background-color: #5473ff;
					height: 64rpx;
					width: 64rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 64rpx;
					color: #fff;
					font-size: 24rpx;
					position: relative;

					.gg {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.remark {
					font-size: 24rpx;
					text-align: center;
					margin-top: 10rpx;
				}
			}

			.item:nth-child(1) .icon {
				background-color: #{$main-color};
			}
		}
	}

	.other-box {
		width: 92%;
		margin: auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.speed {
			width: 100%;
			border-radius: 30rpx;
			height: 64rpx;
			background-color: #f5f5f5;
			margin: 40rpx 0;

			.speed-box {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					color: #999999;
					min-width: 40rpx;
					text-align: center;
				}

				.speed-icon {
					background-color: #d9d9d9;
					height: 70rpx;
					width: 70rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}

		.model-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
			font-size: 28rpx;

			.name {
				color: #333;


			}

			.nn {
				display: flex;

				text {
					color: #999;
					margin-right: 20rpx;
				}
			}
		}
	}

	.subbtn-box {
		background-color: #fff;
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.subbtn {
		width: 92%;
		background-color: #{$main-color};
		height: 80rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin: auto;

	}

	.user-remark {
		display: flex;
		margin-top: 20rpx;
		overflow-x: scroll;

		.item {
			color: #666;
			border-radius: 10rpx;
			background-color: #fff0e7;
			margin-right: 20rpx;
			flex-shrink: 0;
			padding: 6rpx 20rpx;
			box-sizing: border-box;
			// border-radius: 30rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
		}
	}
</style>